import 'package:flutter/material.dart';
import 'package:love_app/common/su.dart';

// 社区的骨架屏
class NullItem extends StatefulWidget {
  @override
  _NullItemState createState() => _NullItemState();
}

class _NullItemState extends State<NullItem> {
  Color color = Colors.grey[200];

  @override
  Widget build(BuildContext context) {
    return Container(
      // height: Su().w(415),
      width: Su().w(750),
      child: _dynamicDetailsLoading(),
    );
  }

  // 正在加载文章详情时显示时显示
  Widget _dynamicDetailsLoading() {
    return Container(
      width: Su().w(750),
      color: Colors.white,
      margin: EdgeInsets.only(
        bottom: Su().h(14),
      ),
      child: Column(
        children: <Widget>[
          _itemHeaderLoading(),
          _itemCententLoading(),
          _itemBottomLoading(),
        ],
      ),
    );
  }

  // 头部显示内容
  Widget _itemHeaderLoading() {
    return Container(
      height: Su().h(114),
      child: Row(
        children: <Widget>[
          _itemHeaderImageLoading(),
          _itemHeaderOtherLoading(),
          // _itemHeaderRightIcon(itemData.id),
        ],
      ),
    );
  }

  // 头像
  Widget _itemHeaderImageLoading() {
    return Container(
      child: Container(
        padding: EdgeInsets.only(
          left: Su().w(20),
          top: Su().h(31),
        ),
        child: ClipOval(
          child: Container(
            width: Su().w(81),
            height: Su().w(81),
            color: color,
          ),
        ),
      ),
    );
  }

  // 姓名和日期
  Widget _itemHeaderOtherLoading() {
    return Expanded(
      child: Container(
        padding: EdgeInsets.only(
          left: Su().w(18),
        ),
        alignment: Alignment.centerLeft,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.end,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Container(
              width: Su().w(193),
              height: Su().h(25),
              color: color,
              margin: EdgeInsets.only(
                bottom: Su().h(5),
              ),
            ),
            Container(
              width: Su().w(97),
              height: Su().h(22),
              color: color,
            ),
          ],
        ),
      ),
    );
  }

  // 中间内容
  Widget _itemCententLoading() {
    return Container(
      width: Su().w(587),
      padding: EdgeInsets.only(
        left: Su().w(36),
        top: Su().h(21),
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          _itemCententTextLoading(),
          _itemCententPicsLoading(),
        ],
      ),
    );
  }

  // 中间文字
  Widget _itemCententTextLoading() {
    return Container(
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Container(
            width: Su().w(400),
            height: Su().h(27),
            color: color,
            margin: EdgeInsets.only(
              bottom: Su().h(5),
            ),
          ),
          Container(
            width: Su().w(200),
            height: Su().h(27),
            color: color,
          ),
        ],
      ),
    );
  }

  // 图片
  Widget _itemCententPicsLoading() {
    return Container(
      padding: EdgeInsets.only(
        top: Su().h(23),
      ),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: <Widget>[
          Container(
            width: Su().w(173.6),
            height: Su().w(173.6),
            color: color,
          ),
          Container(
            width: Su().w(173.6),
            height: Su().w(173.6),
            color: color,
          ),
          Container(
            width: Su().w(173.6),
            height: Su().w(173.6),
            color: color,
          ),
        ],
      ),
    );
  }

  // 底部内容
  Widget _itemBottomLoading() {
    return Container(
      padding: EdgeInsets.only(
        top: Su().h(30),
        bottom: Su().h(24),
      ),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: <Widget>[
          Container(
            margin: EdgeInsets.only(
              left: Su().w(120),
            ),
            width: Su().w(100),
            height: Su().h(22),
            color: color,
          ),
          Container(
            margin: EdgeInsets.only(
              right: Su().w(87),
            ),
            width: Su().w(100),
            height: Su().h(22),
            color: color,
          ),
        ],
      ),
    );
  }
}
